import React, { useState, useContext, useEffect } from 'react';
import { Drawer, Spin, Button, Form, Input, Row, Col, Timeline } from 'antd';

import { NeedUpdateContext } from '../common/NeedContext';
import { requirementApplicationFormat } from '../common/Format';
import '../common/style.less';

import ScrollBarLayout from '@/components/ScrollBarLayout';
import { TagSelectNew as TagSelect } from '@/components/TagSelectNew';
import { CheckCircleOutlined, CloseCircleOutlined, ClockCircleOutlined, FileDoneOutlined } from '@ant-design/icons';
import MyIcon from '@/components/MyIcon';
import { NeedUpdateAPI } from '../common/type';

/**
 * @UpdateAuditRecordDrawer 审批记录以及审核抽屉
 * @param isShow 审核记录抽屉渲染状态
 * @param onClose 关闭审核记录抽屉
 * @param form 审核表单实例
 * @param onSubmit 审核表单提交事件
 * @returns
 */
const UpdateAuditRecordDrawer: React.FC<NeedUpdateAPI.IUpdateAuditRecordDrawer> = ({ isShow, onClose, form, onSubmit }) => {
  const { prefixCls, needInfo } = useContext(NeedUpdateContext);
  // 申请状态
  const checkStateList = [
    {
      value: 1,
      name: (
        <div>
          <CheckCircleOutlined />
          <span style={{ marginLeft: '5px' }}>通过</span>
        </div>
      ),
    },
    {
      value: 2,
      name: (
        <div>
          <CloseCircleOutlined />
          <span style={{ marginLeft: '5px' }}>取消</span>
        </div>
      ),
    },
  ];

  // 审核申请抽屉状态
  const [isShowApply, setIsShowApply] = useState<boolean>(false);

  /**
   * @onSave 保存事件
   */
  const onSave = async () => {
    (await onSubmit()) && setIsShowApply(false);
  };

  /**
   * @changeCheckState 审核状态改变事件
   * @description 根据状态设置审核意见
   * @param state 状态
   */
  const changeCheckState = (state: number) => {
    if (state == 1) {
      form.setFieldsValue({ checkResult: '通过' });
    } else {
      form.setFieldsValue({ checkResult: '' });
    }
  };

  // 默认设置审核原因
  useEffect(() => {
    form.setFieldsValue({ checkResult: '通过' });
  }, [form]);

  return (
    <>
      <Drawer
        title="审核记录"
        open={isShow}
        destroyOnClose
        width={document.body?.clientWidth * 0.3}
        closable={false}
        getContainer={false}
        onClose={() => {
          onClose(false);
          setIsShowApply(false);
        }}
        headerStyle={{ padding: '1rem' }}
        bodyStyle={{ padding: 0 }}
        style={{ position: 'absolute' }}
      >
        <div id={'audit-record-drawer'}>
          <Spin spinning={false}>
            <ScrollBarLayout style={{ padding: '5px 0px', flex: 'auto' }}>
              <div
                className={prefixCls + 'TimelineStyle'}
                style={{
                  padding: '25px',
                  textAlign: 'left',
                  margin: '0 10px',
                }}
              >
                <Timeline>
                  {needInfo?.purchaseNeedChecks &&
                    needInfo.purchaseNeedChecks.length > 0 &&
                    needInfo.purchaseNeedChecks.map((item: Record<string, any>, index: number, arrs: Record<string, any>[]) => {
                      return (
                        <div key={index}>
                          {item?.checkTime && (
                            <Timeline.Item dot={<ClockCircleOutlined className="timeline-clock-icon" />} color={'red'}>
                              <Row
                                style={{
                                  background: 'rgb(247 247 247)',
                                  padding: '5px 10px 10px 10px',
                                }}
                              >
                                <Col className={prefixCls + 'TimelineStyle-ColTitle'} span={24}>
                                  {item?.checkTime || '--'} &nbsp;&nbsp;
                                  <span className={prefixCls + 'TimelineStyle-ColState'}>{requirementApplicationFormat(Number(item?.checkState))}</span>
                                </Col>
                                <Col span={24}>
                                  <MyIcon type="icon-user" />
                                  <span className={prefixCls + 'TimelineStyle-spanLabel'}>审核人：</span>
                                  <span className={prefixCls + 'TimelineStyle-spanWeight'}>{item?.checkerName || '--'}</span>
                                </Col>
                                <Col span={24}>
                                  <MyIcon type="icon-bumen" />
                                  <span className={prefixCls + 'TimelineStyle-spanLabel'}>审核部门：</span>
                                  <span className={prefixCls + 'TimelineStyle-spanWeight'}>{item?.checkDepartmentName || '--'}</span>
                                </Col>
                                <Col span={24} style={{ display: 'flex' }}>
                                  <MyIcon type="icon-pandian1" />
                                  <span className={prefixCls + 'TimelineStyle-spanLabel'} style={{ whiteSpace: 'nowrap' }}>
                                    审核意见：
                                  </span>
                                  <div className={prefixCls + 'TimelineStyle-spanWeight'}>{item?.checkResult || '--'}</div>
                                </Col>
                              </Row>
                            </Timeline.Item>
                          )}
                          <Timeline.Item dot={<ClockCircleOutlined className="timeline-clock-icon" />}>
                            <Row
                              style={{
                                background: 'rgb(247 247 247)',
                                padding: '5px 10px 10px 10px',
                              }}
                            >
                              <Col className={prefixCls + 'TimelineStyle-ColTitle'} span={24}>
                                {item?.applyTime || '--'} &nbsp;&nbsp;
                                <span className={prefixCls + 'TimelineStyle-ColState'} style={{ color: '#1677ff' }}>
                                  {index === arrs?.length - 1 ? '提交申请' : '重新提交申请'}
                                </span>
                              </Col>
                              <Col span={24}>
                                <MyIcon type="icon-user" />
                                <span className={prefixCls + 'TimelineStyle-spanLabel'}>提交人：</span>
                                <span className={prefixCls + 'TimelineStyle-spanWeight'}>{item?.applyerName || '--'}</span>
                              </Col>
                              <Col span={24}>
                                <MyIcon type="icon-bumen" />
                                <span className={prefixCls + 'TimelineStyle-spanLabel'}>提交部门：</span>
                                <span className={prefixCls + 'TimelineStyle-spanWeight'}>{item?.applyDepartmentName || '--'}</span>
                              </Col>
                            </Row>
                          </Timeline.Item>
                        </div>
                      );
                    })}
                </Timeline>
              </div>
            </ScrollBarLayout>
          </Spin>
          {(needInfo?.state == 1 || needInfo?.state == 2) && (
            <div className={'baseinfo-footer'}>
              <Button
                type="primary"
                onClick={() => {
                  onClose(false);
                }}
                // icon={<CloseCircleOutlined />}
              >
                关闭
              </Button>
              <Button
                type="primary"
                onClick={() => {
                  setIsShowApply(true);
                }}
                // icon={<FileDoneOutlined />}
              >
                审核
              </Button>
            </div>
          )}
        </div>
      </Drawer>
      <Drawer
        title="审核申请"
        open={isShowApply}
        mask={false}
        placement={'bottom'}
        height={300}
        destroyOnClose
        closable={false}
        style={{
          position: 'absolute',
          overflow: 'hidden',
        }}
        headerStyle={{ padding: '1rem' }}
        bodyStyle={{ padding: 0 }}
        getContainer={() => document.getElementById('audit-record-drawer') as any}
      >
        <div className={'audit-apply-drawer'}>
          <Spin spinning={false}>
            <div style={{ padding: '12px 1rem' }}>
              <Form form={form}>
                <TagSelect
                  colSpan={24}
                  formLabel="审核状态"
                  formRequired
                  formName="checkState"
                  defalultKeys={1}
                  onChange={changeCheckState}
                  radioList={checkStateList}
                />
                <Form.Item
                  label="审核意见"
                  name="checkResult"
                  rules={[
                    {
                      required: true,
                      message: '请填写审核意见',
                    },
                  ]}
                >
                  <Input.TextArea placeholder={`请输入审核意见`} showCount maxLength={200} autoSize={{ minRows: 3, maxRows: 5 }} />
                </Form.Item>
              </Form>
            </div>
          </Spin>
          <div className={'baseinfo-footer'}>
            <Button
              type="primary"
              onClick={() => {
                setIsShowApply(false);
              }}
              // icon={<CloseCircleOutlined />}
            >
              取消
            </Button>
            <Button
              type="primary"
              onClick={() => {
                onSave();
              }}
              // icon={<CheckCircleOutlined />}
            >
              确认
            </Button>
          </div>
        </div>
      </Drawer>
    </>
  );
};
export default UpdateAuditRecordDrawer;
